<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>vue exercise</title>
    <script type="text/javascript" src="/js/vue.min.js"></script>
    <script type="text/javascript" src="/js/fetch.min.js"></script>
    <script type="text/javascript" src="/js/axios.min.js"></script>
    <style>
        table tr td{
            border:1px solid gray;
        }
        table{
            border-collapse:collapse;
            width:300px;
        }
        tr.firstLine{
            background-color: lightGray;
        }
    </style>
</head>
<body>
hello world!!!
name=${name } welcome!
<div id="div1">
    {{gareen.name}}
</div>
<button id="btn1" @click="count">点击{{gareen.hp+" "+value}}</button>
<div id="hero"></div>
<div id="hero2"></div>
<div id="div2">

    <table align="center" >
        <tr class="firstLine">
            <td>name</td>
            <td>hp</td>
        </tr>

        <tr v-for="hero in heros">
            <td>{{hero.name}}</td>
            <td>{{hero.hp}}</td>
        </tr>

    </table>

</div>
<div id="div3">

    <table align="center" >
        <tr class="firstLine">
            <td>人民币</td>
            <td>美元</td>
        </tr>
        <tr>
            <td align="center" colspan="2">
                汇率： <input type="number" v-model.number="exchange" />
            </td>
        </tr>

        <tr>

            <td align="center">
                ￥: <input type="number" v-model.number = "rmb"  />
            </td>
            <td align="center">
                $: <input type="number" v-model.number = "dollar"   />
            </td>
        </tr>
    </table>

</div>

<script>
    //准备数据
    var gareen = {"name":"盖伦","hp":616};
    //通过vue.js 把数据和对应的视图关联起来
    new Vue({
        el: '#div1',
        data: {
            message: gareen
        }
    })
    new Vue({
        el: '#btn1',
        data: {
            message: gareen,
            value:0
        },
        methods:{
            count:function(){
                this.value ++;
            }
        }
    })
    //一般说来 Vue 不会直接使用原生的 Ajax 而是使用 ajax 框架。 而 fetch.js和axios.js 就是眼下比较流行的一种 ajax 框架
    var url = "http://127.0.0.1:8080/json.txt"
    fetch(url).then(function(response) {
        response.json().then(function (jsonObject) {
            //alert(jsonObject.hp);
            var jsonString = JSON.stringify(jsonObject)
            document.getElementById("hero").innerHTML = "通过fetch获取到的json数据："+ jsonString;
        })
    }).catch(function(err){
        console.log("Fetch错误:"+err);
    })
    axios.get(url).then(function(response) {
        var jsonObject = response.data;
        //alert(jsonObject.name);
        var jsonString = JSON.stringify(jsonObject)
        document.getElementById("hero2").innerHTML = "通过 axios 获取到的json数据："+ jsonString;
    })

    var url2 = "http://127.0.0.1:8080/jsons.txt";
    new Vue({
        el:'#div2',
        data:{
            heros:[]
        },
        mounted:function(){ //mounted　表示这个 Vue 对象加载成功了
            self=this
            /*fetch(url2).then(function(response) {
                response.json().then(function (jsonObject) {
                    self.heros = jsonObject
                })
            }).catch(function(err){
                console.log("Fetch错误:"+err);
            })*/
            axios.get(url2).then(function(response) {
                self.heros= response.data; //此时还是字符串
                self.heros = eval("("+self.heros+")");  //字符串转换为数组对象
            })
        }
    })

    new Vue({
        el: '#div3',
        data: {
            exchange:6.4,
            rmb:0,
            dollar:0
        },
        watch:{
            exchange:function(val){
                this.exchange = val;
                this.dollar = this.rmb / this.exchange;
                this.rmb = this.dollar * this.exchange;
            },
            rmb:function(val) {
                this.rmb = val;
                this.dollar = this.rmb / this.exchange;
            },
            dollar:function(val) {
                this.dollar = val;
                this.rmb = this.dollar * this.exchange;
            },
        }

    })
</script>
</body>
</html>
